<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <style type="text/css">
        body {
            background: #f4f4f4;
            background-position: center;
            background-size: cover;
            position: relative;
            font-size: 13px;

        }

        /*分类*/
        .contain {
            line-height: 1.4;
            background: #fff;
            overflow: hidden;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }

        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .contain .aui-list-view:after {
            border: none;
        }

        .aui-list-view-cell:last-child:after {
            border-bottom: 1px solid #c8c7cc !important;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }

        .contain-left, .contain-right {
            overflow-y: auto;
            height: 100%;
        }

        .contain-right {
            /*padding: 12px;*/
            width: 75%;
            float: left;
            display: inline-block;
        }

        .contain .aui-content {
            overflow-y: auto;
            position: relative;
        }

        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }

        .tuijian {
            position: relative;
        }

        .other {
            display: none;
            text-align: center;
            overflow-y: hidden;
        }

        .other ul {
            position: relative;
            overflow-y: hidden;
        }

        .other .aui-list-view-cell {
            padding: 8px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }

        .aui-icon-sort {
            font-size: 20px !important;
        }

        .contain {
            height: 100%;
        }

        .fenlei {
        }

        .other-title {
            padding: 15px;
            font-size: 14px;
            font-weight: 400;
            width: 100%;
            display: inline-block;
            position: relative;
            color: #8f8f94;
        }

        .aui-list-view .aui-img-object {
            height: 60px !important;
        }

        #Category-content li.active:before {
            content: '';
            width: 2px;
            top: 0;
            height: 100%;
            background: #f3f3f2;
            position: absolute;
            right: -1px;
            z-index: 9;
        }
    </style>
</head>
<body>
<!-- 分类 -->
<div class="fenlei">
    <div class="contain  mui-row mui-fullscreen">
        <div class="contain-left mui-col-xs-3 aui-border-r">
            <div class="aui-content ">
                <ul class="aui-list-view aui-border-b aui-border-r" id='Category-content'>
                    <!--一级分类-->
                    <!--<li class="aui-padded-10 aui-img aui-border-t positionARelative  aui-ellipsis-1 active " tapmode-->
                        <!--onclick="changeCategory(this)">-->

                        <!--一级分类-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <div class="contain-right aui-col-xs-9">
            <div class="tuijian">
                <!-- 推荐 热门分类 -->

                <div class="kongshuju">
                    <p>暂无数据</p>
                </div>
                <ul class="aui-list-view aui-padded-l-10" id='goodList-content'>
                    <!--<li class="aui-list-view-cell aui-img aui-counter-list aui-padded-l-0 ">-->
                    <!--<img class="aui-img-object aui-pull-left aui-margin-r-5" src="../image/dongtai.jpg">-->
                    <!--<p class="aui-ellipsis-1 font-size-12">这个是上边的标题哦</p>-->
                    <!--<p class="font-size-12 aui-margin-5">已有205人付款</p>-->
                    <!--<p class=" aui-text-danger  ">¥ 78元</p>-->
                    <!--</li>-->

                </ul>
                <!-- <div class="aui-content">
                    <div class="tuijian-title aui-ellipsis-1">热销</div>
                    <ul class="aui-list-view aui-grid-view">

                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                    </ul>
                </div> -->

            </div>
        </div>
    </div>
</div>
<script id="Search-template" type="text/x-dot-template">
    <ul>
        {{ for(var i in it) { }}
        {{? it[i].three }}
        <li class="aui-list-view-cell aui-img aui-border aui-ellipsis-1 " tapmode
            onclick='toCategoryList({{=it[i].three.catid}},"{{=it[i].three.catname}}")'>
            {{=it[i].three.catname}}
        </li>
        {{?? it[i].two }}

        <li class="aui-list-view-cell aui-img aui-border aui-ellipsis-1 " tapmode
            onclick='toCategoryList({{=it[i].two.catid}},"{{=it[i].two.catname}}")'>

            {{=it[i].two.catname}}

        </li>
        {{??}}

        <li class="aui-list-view-cell aui-img aui-border aui-ellipsis-1 " tapmode
            onclick='toCategoryList({{=it[i].one.catid}},"{{=it[i].one.catname}}")'>

            {{=it[i].one.catname}}
        </li>
        {{?}}

        {{}}}

    </ul>


</script>
<script id="Category-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-padded-10 aui-img aui-border-b  aui-ellipsis-1 {{?i==0}}active{{}}} " categoryId="{{=it[i].cat_id}}"
        tapmode onclick="changeCategory(this)">

        {{=it[i].cat_name}}
    </li>

    {{ } }}
</script>

<script id="goodList-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-counter-list aui-padded-l-0 " tapmode
        onclick="goToGoodInfo('{{=it[i].goods_id}}')">
        <img class="aui-img-object aui-pull-left aui-margin-r-5" src="{{=it[i].goods_img}}">
        <p class="aui-ellipsis-1 font-size-12">{{=it[i].goods_name}}</p>
        <p class="font-size-12 aui-margin-5">已有{{=it[i].sales_volume_base}}人付款</p>
        <p class=" aui-text-danger  ">¥ {{=it[i].shop_price}}元</p>
    </li>


    {{ } }}
</script>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var isLock = false, page = 1, categoryId = "";
    apiready = function () {
        api.parseTapmode();
        // getTrade();
        // getBrand();
        // getMarket();
//        hotCategory();
        getCategory();
    }


    ///切换左侧分类的样式

    //$(document).on("click",".contain-left li",function(){
    function changeCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        categoryId = $(obj).attr("categoryId");
        getGoodsForCategoryId(categoryId);
//        if ($(obj).index() == 0) {
//            $(".tuijian").css({"display": "block"});
//            $(".other").css({"display": "none"});
//        } else {
//            $(".tuijian").css({"display": "none"});
//            $(".other").css({"display": "block"});
//        }
    }
    function getGoodsForCategoryId(id) {
        showLoading()
        var url = "goods/list";
        var data = {};
        data["category_id"] = id;
        data["count"] = 50;
        getStorageAll();
        ajaxRequest(url, 'get', data, function (ret, err) {
            hideLoading();
            var content = $api.byId('goodList-content');
            var tpl = $api.byId('goodList-template').text;
            var tempFn = doT.template(tpl);
            if (page > 1) {
                if (!$.trim(ret.data)) {
                    return;
                }
                $api.append(content, tempFn(ret.data));
            } else {
                showNoTip(ret.data);
                $api.html(content, tempFn(ret.data));
            }
        });
    }

    function searchBack() {
        $(".fenlei").show();
        $(".searchResult").hide();
    }

    function doSearch() {
        $api.addCls($api.dom(".aui-searchbar-wrap"), "focus");
        $api.dom('.aui-searchbar-input input').focus();
    }
    function cancelSearch() {
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"), "focus");
        $api.val($api.byId("search-input"), '');
        $api.dom('.aui-searchbar-input input').blur();
    }
    function clearInput() {
        $api.val($api.byId("search-input"), '');
    }
    function search() {
        var content = $api.val($api.byId("search-input"));
        if (content) {
            api.alert({
                title: '搜索提示',
                msg: '您输入的内容为：' + content
            });
        } else {
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }
    function funcGotoBakHome(index) {
        getStorageAll();
        if (user_id) {
            api.execScript({
                name: 'root',
                script: 'randomSwitchBtnBakHome(' + index + ')'
            });
        } else {
            openTo('login_win');
        }
    }
    //提示信息
    function message() {
        api.toast({
            msg: '暂不支持',
            duration: 2000,
            location: 'middle'
        });
    }

    function tobrand() {
        api.openWin({
            name: 'pinpaishang_win',
            url: 'pinpaishang_win.html',
            reload: true,
            //delay: 300
        });
    }






    //打开商品列表
    function toCategoryList(catId, catName) {
        api.openWin({
            name: 'categoryList_win',
            url: 'categoryList_win.html',
            pageParam: {
                categoryId: catId,
                categoryName: catName
            },
            delay: 300
        });
    }

    //打开商品列表
    function getCategory() {
        if (isLock)return;
        isLock = true;
        showLoading()
        var url = "app/category/goods";
        var data = {};
        getStorageAll();
        ajaxRequest(url, 'get', data, function (ret, err) {
            hideLoading();
            isLock = false;
            var content = $api.byId('Category-content');
            var tpl = $api.byId('Category-template').text;
            var tempFn = doT.template(tpl);
            if (page > 1) {
                if (!$.trim(ret.data)) {
                    return;
                }
                $api.append(content, tempFn(ret.data));
            } else {
                showNoTip(ret.data);
                $api.html(content, tempFn(ret.data));
            }
            getGoodsForCategoryId(ret.data[0]['cat_id'])
        });
    }
</script>
</html>